<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script src="dist/umd/vue.js"></script>
  <div id="app"></div>
  <!-- 完整@vue/reactivity -->
  <!-- 创建虚拟节点 将虚拟节点转换成真实节点 -->
  <!-- 组件的实现 setup -->
  <!-- reactive API 实现effect -->
  <!-- diff 算法 -->
  <!-- vite -->

  <script>
    let { render } = Vue;
    const state = {
      count: 0,
    }
    // chrldren 可是数组也可是字符串
    const vnode = {
      tag: 'div',
      props: {
        color: 'yellow'
      },
      children: [
        {
          tag: 'p',
          props: {
            color: 'blue'
          },
          children: 'hello vue3 计数器' + state.count
        }, {
          tag: 'button',
          props: {
            onclick: () => {
              alert(state.count);
            },

          },
          children: "点我啊"
        }
      ]
    }
    render(vnode, document.getElementById('app'));
  </script>
</body>

</html>